<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {goBack, messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "TransactionDetailView",
  inject: ["reload"],
  data() {
    return {
      tranDetail: {
        // 包含交易流水号、金额、预计成交日期、交易阶段、描述、下次联系时间、创建时间等字段
        stageDO: {}
      },
      // 交易跟踪记录新增备注对象
      tranRemark: {},
      // 交易跟踪记录列表
      tranRemarkList: [],
      // 分页参数
      pageSize: 0,
      total: 0,
      // 交易备注编辑弹窗相关数据
      tranRemarkDialogVisible: false,
      tranRemarkQuery: {
        id: null,
        noteWay: null,
        noteContent: ''
      },
      tranRemarkRules: {
        noteWay: [
          {required: true, message: '请选择跟踪方式', trigger: ['blur', 'change']}
        ],
        noteContent: [
          {required: true, message: '跟踪内容不能为空', trigger: 'blur'},
          {min: 5, max: 500, message: '跟踪内容长度为5-500个字符', trigger: 'blur'}
        ]
      },
      noteWayOptions: [{}],
      clueRemarkRules: {
        noteWay: [
          {required: true, message: '请选择跟踪方式', trigger: ['blur', 'change']}
        ],
        noteContent: [
          {required: true, message: '跟踪内容不能为空', trigger: 'blur'},
          {min: 5, max: 500, message: '跟踪内容长度为5-500个字符', trigger: 'blur'}
        ]
      },
    };
  },
  methods: {
    goBack,
    // 加载交易详情
    loadTranDetail() {
      let id = this.$route.params.id;
      doGet("/api/transaction/detail/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.tranDetail = resp.data.data;
        }
      });
    },

    // 加载交易备注列表
    loadTranRemarkList(current) {
      let id = this.$route.params.id;
      doGet("/api/transaction/remark", {
        current: current,
        tranId: id
      }).then(resp => {
        if (resp.data.code === 200) {
          this.tranRemarkList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      });
    },

    // 提交交易备注（新增备注）
    tranRemarkSubmit() {
      this.$refs.tranRemarkForm.validate((isValid) => {
        if (isValid) {
          doPost("/api/transaction/remark", {
            tranId: this.tranDetail.id,
            noteContent: this.tranRemark.noteContent,
            noteWay: this.tranRemark.noteWay
          }).then(resp => {
            if (resp.data.code === 200) {
              messageTip("提交成功", "success");
              this.reload();
            } else {
              messageTip("提交失败", "error");
            }
          });
        }
      })
    },

    // 打开交易备注编辑弹窗
    editRemark(id) {
      doGet("/api/dicvalue/noteWay", {}).then(resp => {
        if (resp.data.code === 200) {
          this.noteWayOptions = resp.data.data
          this.tranRemarkDialogVisible = true;
          doGet("/api/transaction/remark/" + id, {}).then(resp => {
            if (resp.data.code === 200) {
              this.tranRemarkQuery = resp.data.data;
            }
          });
        }
      })
    },

    // 提交交易备注编辑修改
    tranRemarkEditSubmit() {
      this.$refs.tranRemarkEditForm.validate((isValid) => {
        if (isValid) {
          doPut("/api/transaction/remark/update", this.tranRemarkQuery).then(resp => {
            if (resp.data.code === 200) {
              messageTip("修改成功", "success");
              this.tranRemarkDialogVisible = false;
              this.loadTranRemarkList(1);
            } else {
              messageTip("修改失败", "error");
            }
          });
        }
      })
    },

    // 删除交易备注
    delRemark(id) {
      messageConfirm("确定删除该跟踪记录吗？").then(() => {
        doDelete("/api/transaction/remark/delete/" + id, {}).then(resp => {
          if (resp.data.code === 200) {
            messageTip("删除成功", "success");
            this.loadTranRemarkList(1);
          } else {
            messageTip("删除失败，原因：" + resp.data.msg, "error");
          }
        });
      }).catch(() => {
        messageTip("取消删除", "warning");
      });
    },

    // 分页
    toPage(current) {
      this.loadTranRemarkList(current);
    },

    // 加载字典数据（例如 noteWay）
    loadDicValue(typeCode) {
      doGet("/api/dicvalue/" + typeCode, {}).then(resp => {
        if (resp.data.code === 200) {
          if (typeCode === 'noteWay') {
            this.noteWayOptions = resp.data.data;
          }
        }
      });
    }
  },

  mounted() {
    this.loadTranDetail();
    this.loadTranRemarkList(1);
  }
};
</script>

<template>
  <div>
    <!-- 交易基本信息展示 -->
    <el-form label-width="110px" style="max-width: 95%;">
      <el-form-item label="交易流水号">
        <div class="desc">{{ tranDetail.tranNo }}</div>
      </el-form-item>
      <el-form-item label="交易金额">
        <div class="desc">{{ tranDetail.money }}</div>
      </el-form-item>
      <el-form-item label="预计成交日期">
        <div class="desc">{{ tranDetail.expectedDate }}</div>
      </el-form-item>
      <el-form-item label="交易阶段">
        <div class="desc">{{ tranDetail.stageDO.typeValue }}</div>
      </el-form-item>
      <el-form-item label="交易描述">
        <div class="desc">{{ tranDetail.description }}</div>
      </el-form-item>
      <el-form-item label="下次联系时间">
        <div class="desc">{{ tranDetail.nextContactTime }}</div>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="desc">{{ tranDetail.createTime }}</div>
      </el-form-item>
    </el-form>

    <!-- 新增交易备注表单 -->
    <el-form ref="tranRemarkForm" :model="tranRemark" label-width="110px" style="max-width: 95%;"
             :rules="clueRemarkRules">
      <el-form-item label="填写跟踪记录" prop="noteContent">
        <el-input v-model="tranRemark.noteContent" type="textarea" :rows="8" placeholder="请输入跟踪记录"/>
      </el-form-item>
      <el-form-item label="跟踪方式" prop="noteWay">
        <el-select v-model="tranRemark.noteWay" placeholder="请选择跟踪方式" style="width: 100%"
                   @click="loadDicValue('noteWay')" clearable>
          <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="tranRemarkSubmit">提 交</el-button>
        <el-button type="success" plain @click="goBack">返 回</el-button>
      </el-form-item>
    </el-form>

    <!-- 交易备注记录展示 -->
    <el-table :data="tranRemarkList" style="width: 100%">
      <el-table-column type="index" label="序号" width="60"/>
      <el-table-column prop="noteWayDO.typeValue" label="跟踪方式"/>
      <el-table-column prop="noteContent" label="跟踪内容"/>
      <el-table-column prop="createTime" label="跟踪时间"/>
      <el-table-column prop="createByDO.name" label="跟踪人"/>
      <el-table-column prop="editTime" label="编辑时间"/>
      <el-table-column prop="editByDO.name" label="编辑人"/>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <a href="javascript:" @click="editRemark(scope.row.id)">编辑</a>
          &nbsp;
          <a href="javascript:" @click="delRemark(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="toPage"/>

    <!-- 交易备注编辑弹窗 -->
    <el-dialog v-model="tranRemarkDialogVisible" title="编辑交易跟踪记录" width="55%" center draggable>
      <el-form ref="tranRemarkEditForm" :model="tranRemarkQuery" label-width="110px" :rules="tranRemarkRules">
        <el-form-item label="跟踪方式" prop="noteWay">
          <el-select v-model="tranRemarkQuery.noteWay" placeholder="请选择跟踪方式" style="width: 100%"
                     @click="loadDicValue('noteWay')" clearable>
            <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="跟踪内容" prop="noteContent">
          <el-input v-model="tranRemarkQuery.noteContent" type="textarea" :rows="8" placeholder="请输入跟踪内容"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tranRemarkDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tranRemarkEditSubmit">保 存</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<style scoped>
.desc {
  background: #fbd1de;
  width: 100%;
  padding-left: 15px;
}
</style>
